<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div id="app">
        <h3>{{title}}</h3><button @click="change">改标题</button>
        <ul>
            <li v-for="(item,idx) in data" :key="idx">
                {{item.name}}
                <button @click="del(idx)">-</button>
                {{item.num}}
                <button @click="add(idx)">+</button>
            </li>
        </ul>
        <p>总数量：{{allNum}}</p>
    </div>
</body>
<script src="../libs/vue3.js"></script>
<script>
    const {createApp, ref, reactive, computed, watch} = Vue;

    createApp({
        setup(){
            const title = ref("购物车");
            const data = reactive([{
                name:"张三",
                num:1
            },{
                name:"李四",
                num:5
            }])

            const add = (i)=>{
                data[i].num++
            }
            const del = (i)=>{
                data[i].num--
            }

            // const 计算属性 = computed(()=>{
            //     计算属性的逻辑;
            //     return 计算属性的值
            // })
            const allNum = computed(()=>{
                return data.reduce((i, val) => i+val.num, 0);
            })

            const change = ()=>{
                title.value = 'Vue3购物车'
            }

            watch(title, (newVal, oldVal)=>{
                console.log(oldVal, newVal);
            })
            // watch(属性, (n, o)=>{改变后要执行的功能})

            return {
                data, add, del, allNum, title, change
            }
        }
    }).mount("#app");

</script>
</html>